<template>
  <div>
    <el-dialog
      :visible.sync="tableShow"
      @close="handleClickDeal('cancel')"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :title="title"
      append-to-body
    >
      <!-- 工具栏  -->
      <div class="flexBetween" v-show="postDetail.type !== 'candidateGroups'">
        <el-form :inline="true">
          <el-form-item>
            <el-button class="search el-icon-search" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格  -->
      <el-table
        ref="multipleTable"
        lazy
        :load="getDeptDatas"
        :data="depts"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        highlight-current-row>
        <el-table-column type="selection" width="55" show-overflow-tooltip/>
        <el-table-column prop="fullname" label="部门名称"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClickDeal('cancel','form')"> 取 消
        </el-button>
        <el-button size="medium" type="primary" @click="handleClickDeal('submit')">
          保 存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {allList as userList} from '@/api/system/user'
  import role from '@/api/system/role'
  import crudDept, {getDepts} from "@/api/system/dept";

  export default {
    name: "dept-detail",
    props: {
      postDetail: {
        type: Object,
        default: {
          show: false
        }
      }
    },
    computed: {
      title() {
        return '部门选择'
      }
    },
    watch: {
      postDetail(value) {
        this.tableShow = value.show
        // 初始化表格数据
        this.initDept()
        // 根据参数判断表格选择回显或清空表格选择
        if (value.params) {
          this.clearSelect = false
          this.selectValue = value.params.split(",")
        } else {
          this.clearSelect = true
          console.log('clearSelect', this.clearSelect)
        }
      }
    },
    data() {
      return {
        tableShow: false,
        search: {
          account: '',
          name: '',
          pageSize: 10,
          total: 10,
          pageNo: 0
        },
        depts: [],
        // 候选人员已选择
        values: [],
        deptValues: [],
        valueLabels: [],
        deptValueLabels: [],
        // 数据表格选择回显数组
        selectValue: [],
        // 清空表格选择
        clearSelect: false,
      }
    },
    methods: {
      getDeptDatas(tree, treeNode, resolve) {
        const params = { pid: tree.id };
        crudDept.getDepts(params).then((res) => {
          res.data.forEach((o) => {
            if (!o.isLeaf) {
              o.hasChildren = true;
            }
          });
          resolve(res.data);
        });
      },
      handleClickDeal(type) {
        switch (type) {
          // 取消，关闭窗口
          case 'cancel':
            this.tableShow = false
            this.reset()
            break
          // 保存
          case 'submit':
            this.deptValues = []
            this.deptValueLabels = []
            let arr = this.$refs.multipleTable.selection
            if (arr) {
              arr.forEach((item) => {
                if (item.id) {
                  this.deptValues.push(item.id)
                  this.deptValueLabels.push(item.fullname)
                }
              })
            } else {
              this.deptValues = []
              this.deptValueLabels = []
            }
            this.update(this.postDetail.type)
            this.reset()
            this.tableShow = false
            break
          // 删除
          case 'delete':
            break
        }
      },
      // 表格数据初始化
      async initDept() {
        await crudDept.getPage({
          size: 100,
            page: 1,
            pid: 0,
        }).then(res => {
          res.data.content.forEach((o) => {
            if (!o.isLeaf) {
              o.hasChildren = true;
            }
          });
          this.depts = res.data.content
        })
        this.$nextTick(() => {
          // 回显数据有值遍历，勾选
          if (!this.clearSelect) {
            this.selectValue.forEach(item => {
              this.depts.forEach((value, index) => {
                if (value.account === item) {
                  this.$refs.multipleTable.toggleRowSelection(this.depts[index])
                } else if (value.id === item) {
                  this.$refs.multipleTable.toggleRowSelection(this.depts[index])
                }
              })
            })
          } else {
            // 清空选择
            this.$refs.multipleTable.clearSelection();
          }
        })

      },
      update(type) {
        const param = {}
        param[this.postDetail.type] = [...new Set(this.deptValues)].join(',')
        param["label"] = [...new Set(this.deptValueLabels)].join(',')
        this.$emit('updateProperties', param)
      },
      reset() {
        this.search.account = ''
        this.search.name = ''
        this.$refs.multipleTable.clearSelection();
      }
    },
    updated() {

    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-dialog {
      border-radius: 3px;
    }
    .el-dialog__body {
      padding: 30px;
    }

  }
</style>
